<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基础应用</title>
    <!--学习中使用cdn的方式引入，实际项目中一般都是npm或者yarn-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.js"></script>
</head>
<body>
<style>
    #getBtn{
        background-color: cornflowerblue;
    }
    #postBtn{
        background-color: yellow;
    }
    #putBtn{
        background-color: greenyellow;
    }
    #deleteBtn{
        background-color: orangered;
    }
</style>
<h1>axios基本使用</h1>
<hr>
<button type="button" id="getBtn">发送GET请求</button>
<button type="button" id="postBtn">发送POST请求</button>
<button type="button" id="putBtn">发送PUT请求</button>
<button type="button" id="deleteBtn">发送DELETE请求</button>

<script type="text/javascript">
    //GET
    document.querySelector('#getBtn').onclick = ()=>{
        // axios({
        //     method:'GET',
        //     url:'http://localhost:3000/posts/1'
        // }).then(response =>{
        //     console.log(response);
        // });
        //使用axios封装的方法,其他封装的方法都是类似的
        axios.get('http://localhost:3000/posts/1').then(response =>{
                console.log(response);
        });
    }
    //POST
    document.querySelector('#postBtn').onclick = ()=>{
        axios({
            method:'POST',
            url:'http://localhost:3000/posts',
            data:{
                title:"真不错，今天天气真不错！",
                author:"小黑子"
            }
        }).then(response =>{
            console.log(response);
        });
    }
    //PUT
    document.querySelector('#putBtn').onclick = ()=>{
        axios({
            method:'PUT',
            url:'http://localhost:3000/posts/3',
            data:{
                title:"真不错，今天天气真不错！",
                author:"小鸡子"
            }
        }).then(response =>{
            console.log(response);
        });
    }
    //DELETE
    document.querySelector('#deleteBtn').onclick = ()=>{
        axios({
            method:'DELETE',
            url:'http://localhost:3000/posts/3',
        }).then(response =>{
            console.log(response);
        });
    }
</script>
</body>
</html>